<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式匹配工具</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f8fa;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-top: 0;
        }
        .input-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #34495e;
        }
        textarea, input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        textarea {
            min-height: 150px;
            resize: vertical;
        }
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }
        .checkbox-group input {
            margin-right: 5px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        #results {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 4px;
            background-color: #f9f9f9;
            min-height: 50px;
        }
        .match {
            background-color: #dff0d8;
            padding: 2px 4px;
            border-radius: 3px;
            margin: 2px 0;
            display: inline-block;
        }
        .no-match {
            color: #a94442;
            font-style: italic;
        }
        .highlight {
            background-color: #c8e6c9;
            padding: 2px 0;
        }
        .info-section {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        .example {
            background-color: #f8f9fa;
            padding: 10px;
            border-left: 4px solid #3498db;
            margin-bottom: 10px;
        }
        .example code {
            background-color: #e9ecef;
            padding: 2px 5px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>正则表达式匹配工具</h1>
        
        <div class="input-group">
            <label for="regex">正则表达式:</label>
            <input type="text" id="regex" placeholder="输入正则表达式，例如：\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b">
        </div>
        
        <div class="controls">
            <div class="checkbox-group">
                <input type="checkbox" id="global" checked>
                <label for="global">全局匹配 (g)</label>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="case-insensitive">
                <label for="case-insensitive">忽略大小写 (i)</label>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="multiline">
                <label for="multiline">多行匹配 (m)</label>
            </div>
        </div>
        
        <div class="input-group">
            <label for="test-string">测试文本:</label>
            <textarea id="test-string" placeholder="在此处输入要匹配的文本..."></textarea>
        </div>
        
        <button id="test-btn">测试匹配</button>
        
        <div class="input-group">
            <label>匹配结果:</label>
            <div id="results">
                <p class="no-match">尚未进行匹配</p>
            </div>
        </div>
        
        <div class="info-section">
            <h2>常用正则表达式示例</h2>
            
            <div class="example">
                <p><strong>电子邮件:</strong> <code>\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b</code></p>
            </div>
            
            <div class="example">
                <p><strong>URL:</strong> <code>https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)</code></p>
            </div>
            
            <div class="example">
                <p><strong>电话号码(中国):</strong> <code>^1[3-9]\d{9}$</code></p>
            </div>
            
            <div class="example">
                <p><strong>日期(YYYY-MM-DD):</strong> <code>\d{4}-\d{2}-\d{2}</code></p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const regexInput = document.getElementById('regex');
            const testString = document.getElementById('test-string');
            const globalCheck = document.getElementById('global');
            const caseCheck = document.getElementById('case-insensitive');
            const multilineCheck = document.getElementById('multiline');
            const testBtn = document.getElementById('test-btn');
            const resultsDiv = document.getElementById('results');
            
            testBtn.addEventListener('click', function() {
                testRegex();
            });
            
            // 也可以在输入改变时自动测试
            regexInput.addEventListener('input', debounce(testRegex, 500));
            testString.addEventListener('input', debounce(testRegex, 500));
            globalCheck.addEventListener('change', testRegex);
            caseCheck.addEventListener('change', testRegex);
            multilineCheck.addEventListener('change', testRegex);
            
            function testRegex() {
                const regex = regexInput.value;
                const text = testString.value;
                
                if (!regex || !text) {
                    resultsDiv.innerHTML = '<p class="no-match">请输入正则表达式和测试文本</p>';
                    return;
                }
                
                try {
                    // 构建标志
                    let flags = '';
                    if (globalCheck.checked) flags += 'g';
                    if (caseCheck.checked) flags += 'i';
                    if (multilineCheck.checked) flags += 'm';
                    
                    // 创建正则表达式对象
                    const re = new RegExp(regex, flags);
                    
                    // 查找所有匹配项
                    let matches = [];
                    let match;
                    
                    if (globalCheck.checked) {
                        // 使用exec方法循环查找所有匹配项
                        while ((match = re.exec(text)) !== null) {
                            matches.push({
                                value: match[0],
                                index: match.index,
                                groups: match.slice(1)
                            });
                            
                            // 防止无限循环
                            if (!globalCheck.checked) break;
                        }
                    } else {
                        // 单次匹配
                        match = re.exec(text);
                        if (match) {
                            matches.push({
                                value: match[0],
                                index: match.index,
                                groups: match.slice(1)
                            });
                        }
                    }
                    
                    // 显示结果
                    if (matches.length > 0) {
                        // 创建带有高亮的文本
                        let highlightedText = text;
                        let offset = 0;
                        
                        // 根据匹配项的位置插入HTML标签
                        matches.forEach(function(match, i) {
                            const startPos = match.index + offset;
                            const endPos = startPos + match.value.length;
                            
                            highlightedText = 
                                highlightedText.substring(0, startPos) + 
                                '<span class="highlight">' + 
                                highlightedText.substring(startPos, endPos) + 
                                '</span>' + 
                                highlightedText.substring(endPos);
                            
                            // 更新偏移量，考虑到插入的HTML标签
                            offset += '<span class="highlight">'.length + '</span>'.length;
                        });
                        
                        let resultHTML = '<p>找到 ' + matches.length + ' 个匹配项:</p>';
                        resultHTML += '<pre>' + highlightedText + '</pre>';
                        
                        // 显示详细匹配信息
                        resultHTML += '<p>匹配详情:</p><ul>';
                        matches.forEach(function(match, i) {
                            resultHTML += '<li>匹配 #' + (i+1) + ': <span class="match">' + match.value + '</span>';
                            
                            if (match.groups.length > 0) {
                                resultHTML += '<ul>';
                                match.groups.forEach(function(group, j) {
                                    if (group !== undefined) {
                                        resultHTML += '<li>分组 #' + (j+1) + ': ' + group + '</li>';
                                    }
                                });
                                resultHTML += '</ul>';
                            }
                            
                            resultHTML += '</li>';
                        });
                        resultHTML += '</ul>';
                        
                        resultsDiv.innerHTML = resultHTML;
                    } else {
                        resultsDiv.innerHTML = '<p class="no-match">没有找到匹配项</p>';
                    }
                } catch (e) {
                    resultsDiv.innerHTML = '<p class="no-match">正则表达式错误: ' + e.message + '</p>';
                }
            }
            
            // 防抖函数，避免频繁执行
            function debounce(func, wait) {
                let timeout;
                return function() {
                    const context = this;
                    const args = arguments;
                    clearTimeout(timeout);
                    timeout = setTimeout(function() {
                        func.apply(context, args);
                    }, wait);
                };
            }
        });
    </script>
</body>
</html>